import React, { useEffect, useState } from 'react'
import { Icon, useSetState } from 'react-vant';
import { Swipe } from 'react-vant';
import '../App.css'
import tiwen from '../img/h1.png'
import yisheng from '../img/h2.png'
import yiyuan from '../img/h3.png'
import yao from '../img/h4.png'
import zhen from '../img/h5.png'
import dianhua from '../img/h6.png'
import tu1 from '../img/t1.png'
import tu2 from '../img/t2.png'
import tu3 from '../img/t3.png'
import tu4 from '../img/t4.png'
import tu5 from '../img/t5.png'
import axios from '../utils/request'
import bedonce from '../utils/bedonce'


export default function Home(props) {


    //好评渲染
    const [comList, setComList] = useState([])
    useEffect(() => {
        axios.post('/api/haoping').then(res => {
            // console.log(res);
            setComList([...res.data.data])
        })
    }, [])


    //首页搜索
    const homesearch = (e) => {
        bedonce(() => {
            axios.post('/api/homeSearch', { value: e }).then(res => {
                // console.log(res);
                setComList([...res.data.data])
            })
        }, 1000)
    }

    const togiftlist = () => {
        props.history.push('/giftlist')
    }

   const goscope=()=>{
       props.history.push('/main/scope')
   }

    return (
        <div className="wrap">
            <header>
                <div className="head">
                    <Icon name="search" />
                    <input type="text" placeholder="丁酸氢化可的松乳膏" onChange={(e) => { homesearch(e.target.value) }} />
                </div>
            </header>
            <main>
                <div className="home">
                    <Swipe className="my-swipe" autoplay={3000}>
                        <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/09/24/fb0f/93c724c89287_w526_h368_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                        <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2020/03/23/f67c/ef22718af743_w560_h260_.png" alt="" /></Swipe.Item>
                        <Swipe.Item><img src="https://resource.chunyu.mobi/@/media/images/2017/12/08/a61e/7a8538a570c2_w180_h150_.jpg" alt="" /></Swipe.Item>
                        <Swipe.Item><img src="https://staff.chunyu.mobi/@/media/images/2021/09/24/fb0f/93c724c89287_w526_h368_.png?imageView2/1/w/120/h/116" alt="" /></Swipe.Item>
                    </Swipe>
                    <div className="home1">
                        <div className="home2">
                            <img src={tiwen} alt="" />
                            <div className="home3">
                                <p>快速提问</p>
                                <p>智能匹配医生</p>
                            </div>
                        </div>
                        <div className="home2">
                            <img src={yisheng} alt="" />
                            <div className="home3">
                                <p>找医生</p>
                                <p>全国60万+名医</p>
                            </div>
                        </div>
                    </div>
                    <div className="homea">
                        <div className="homeb">
                            <img src={yiyuan} alt="" />
                            <span>找医院</span>
                        </div>
                        <div className="homeb" onClick={() => { togiftlist() }}>
                            <img src={yao} alt="" />
                            <span>快速购药</span>
                        </div>
                        <div className="homeb" onClick={()=>{goscope()}}>
                            <img src={zhen} alt="" />
                            <span>图文急诊</span>
                        </div>
                        <div className="homeb">
                            <img src={dianhua} alt="" />
                            <span>快捷电话</span>
                        </div>
                    </div>
                    <div className="title">
                        <div className="t1">
                            <h3>特色科室</h3>
                            <p><span>查看全部</span><Icon name="arrow" /></p>
                        </div>
                        <div className='tu'>
                            <div className="tu1">
                                <div className="tu11">
                                    <img src={tu1} alt="" />
                                </div>
                                <div className="tu12">
                                    <img src={tu2} alt="" />
                                </div>
                            </div>
                            <div className="tu2">
                                <div className="tu21">
                                    <img src={tu3} alt="" />
                                </div>
                                <div className="tu22">
                                    <img src={tu4} alt="" />
                                </div>
                                <div className="tu23">
                                    <img src={tu5} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="comment">
                        <h3>你好 春雨医生</h3>
                        <div className="coms">
                            <p><Icon name="chat-o" className='icon' /><span>好评问候</span></p>
                            {
                                comList.map((item) => {
                                    return <div className="goodcom" key={item.id} >
                                        <p>用户:{item.phone}</p>
                                        <p>{item.info}</p>
                                        <p>
                                            <img src={item.img1} alt="" />
                                            <span>{item.name}</span>
                                            <span>{item.keshi}</span>
                                            <span>{item.jibie}</span>
                                        </p>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                    <div className="fff">
                        {
                            comList.map((item, index) => {
                                return <div className="finally" key={item.id}>
                                    <p>
                                        <span>春雨科普</span>
                                        <span>{item.date}</span>
                                    </p>
                                    <div className="fin">
                                        <img src={item.img} alt="" />
                                        <p>{item.title2}</p>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </main>
        </div>
    )
}
